<ng-container
  *ngIf="
    registryDetails$ | async as registryDetails;
    else loadingOrErrorTemplate
  ">
  <div
    class="detail-header d-flex justify-content-between align-items-center px-1">
    <div class="h4 mb-0">
      {{ registryDetails.selectedRegistry.name }} ({{
        registryDetails.selectedRegistry.registry
      }})
    </div>
    <div class="align-self-baseline">
      <mat-form-field
        *ngIf="maTabGroup.selectedIndex === 0"
        appearance="standard">
        <mat-label>{{ 'enum.FILTER' | translate }}</mat-label>
        <input [formControl]="filter" matInput />
      </mat-form-field>
    </div>
  </div>
  <mat-tab-group #maTabGroup class="detail-tabs">
    <mat-tab [label]="'registry.DETAILS' | translate">
      <div class="mt-2">
        <app-registry-details-table
          [filter]="filter"
          [gridHeight]="gridHeight"
          [rowData]="registryDetails.repositories.images"
          [selectedRegistry]="registryDetails.selectedRegistry">
        </app-registry-details-table>
      </div>
    </mat-tab>
    <mat-tab [label]="'registry.OVERVIEW' | translate">
      <app-registry-overview
        [gridHeight]="gridHeight"
        [registryDetails]="registryDetails.repositories.images">
      </app-registry-overview>
    </mat-tab>
  </mat-tab-group>
</ng-container>
<ng-template #loadingOrErrorTemplate>
  <ng-container *ngIf="error; else loadingTemplate">
    <mat-card>
      {{ error | json }}
    </mat-card>
  </ng-container>
  <ng-template #loadingTemplate>
    <app-loading-template></app-loading-template>
  </ng-template>
</ng-template>
